import React from 'react'
import { PieChart, Pie, Cell } from 'recharts'

export default function DataVisualization({ slots, guides }) {
  const availableSlots = slots.filter((s) => !s.occupied).length
  const occupiedSlots = slots.length - availableSlots

  const guideStats = guides.reduce(
    (acc, guide) => {
      const length = calculateDistance(guide.start, guide.end)
      acc.totalLength += length
      acc.averageLength = acc.totalLength / guides.length
      return acc
    },
    { totalLength: 0, averageLength: 0 }
  )

  return (
    <div className="stats-panel">
      <PieChart width={300} height={200}>
        <Pie
          data={[
            { name: '可用', value: availableSlots },
            { name: '占用', value: occupiedSlots },
          ]}
          cx="50%"
          cy="50%"
          outerRadius={60}>
          <Cell fill="#4CAF50" />
          <Cell fill="#FF5252" />
        </Pie>
      </PieChart>
      <div>引导线平均长度: {guideStats.averageLength.toFixed(1)}px</div>
    </div>
  )
}
